<template>
  <div class="account">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>四岁爱上</span>
      </div>
      <div>
        <el-table
          :data="accouList"
          border
          style="width: 100%"
        >
          <el-table-column
            fixed
            prop="index"
            label="序号"
            width="150"
          />
          <el-table-column
            prop="name"
            label="用户名"
            width="120"
          />
          <el-table-column
            prop="icon"
            label="头像"
            width="120"
          >
            <template v-slot="sisui">
              <div style="width:100px;height:100px;border:1px solid #000;border-radius:50%">
                <img :src="sisui.row.icon" style="width:100%;height:100%;border-radius:50%" alt="">
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="nickname"
            label="昵称"
            width="120"
          />
          <el-table-column
            prop="realname"
            label="真实姓名"
            width="120"
          />
          <el-table-column
            prop="sex"
            label="性别"
            width="120"
          />
          <el-table-column
            prop="address"
            label="电话"
            width="120"
          />
          <el-table-column
            prop="address"
            label="邮箱"
            width="120"
          />
          <el-table-column
            prop="address"
            label="生日"
            width="120"
          />
          <el-table-column
            prop="address"
            label="注册时间"
            width="120"
          />
        </el-table>
        <el-pagination
          :current-page="start"
          :page-sizes="[1, 5, 10, 50,100,200]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import { findMembersByPage } from '@/api/registered/index.js'
export default {
  data() {
    return {
      start: 1,
      limit: 5,
      total: 0,
      accouList: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      findMembersByPage(this.start, this.limit).then((res) => {
        console.log(res)
        res.data.rows.forEach(ele => {
          if (ele.sex === 2) {
            ele.sex = '女'
          } else if (ele.sex === 1) {
            ele.sex = '男'
          } else {
            ele.sex = '未知'
          }
        })
        this.total = res.data.total
        this.accouList = res.data.rows
      })
    },
    // handleSizeChange  点击条数/页触发请求新数据
    handleSizeChange(e) {
      this.limit = e
      this.init()
    },
    // handleCurrentChange
    handleCurrentChange(e) {
      this.start = e
      this.init()
    }
  }
}
</script>

<style lang="scss" scoped>
.account{
  margin:30px;
}
</style>
